<template>
    <h1 class="row-title">不同方向</h1>
    <div class="row">
        <XiaoQuan-Tooltip content="this is a test" placement="top" @visible-change="handle">
            <XiaoQuan-Button type="primary">top</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
        <XiaoQuan-Tooltip content="this is a test" placement="bottom">
            <XiaoQuan-Button type="warning">bottom</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
        <XiaoQuan-Tooltip content="this is a test" placement="left">
            <XiaoQuan-Button type="danger">left</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
        <XiaoQuan-Tooltip content="this is a test" placement="right">
            <XiaoQuan-Button type="success">right</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
    </div>
    <h1 class="row-title">手动触发模式</h1>
    <div class="row">
        <XiaoQuan-Tooltip content="this is a test" placement="right" manual ref="tooltipRef">
            <XiaoQuan-Button type="primary">right</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
    </div>
    <div class="row">
        <XiaoQuan-Button @click="openHandle">打开提示框</XiaoQuan-Button>
        <XiaoQuan-Button @click="closeHandle">关闭提示框</XiaoQuan-Button>
    </div>

    <h1 class="row-title">延时触发</h1>
    <div class="row">
        <XiaoQuan-Tooltip
            content="this is a test"
            placement="top"
            :open-delay="2000"
            :close-delay="2000"
            @visible-change="handle"
        >
            <XiaoQuan-Button type="primary">top</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
        <XiaoQuan-Tooltip
            content="this is a test"
            placement="bottom"
            :open-delay="2000"
            :close-delay="2000"
        >
            <XiaoQuan-Button type="warning">bottom</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
        <XiaoQuan-Tooltip content="this is a test" placement="left" :open-delay="2000" :close-delay="2000">
            <XiaoQuan-Button type="danger">left</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
        <XiaoQuan-Tooltip content="this is a test" placement="right" :open-delay="2000" :close-delay="2000">
            <XiaoQuan-Button type="success">right</XiaoQuan-Button>
        </XiaoQuan-Tooltip>
    </div>
</template>

<script setup>
    import { ref } from "vue";
    const tooltipRef = ref(null);
    const handle = (isShow)=> {
        if(isShow) {
            console.log("提示框显示");
            return;
        }
        console.log("提示框隐藏");
    }
    const openHandle = ()=> {
        tooltipRef.value.show();
    }
    const closeHandle = ()=> {
        tooltipRef.value.hide();
    }
</script>

<style lang="scss" scoped>

</style>